<template>
  <div class="os-main">
    <ConfigForm v-model="dataForm" :config="config" ref="configFormRef" />

    <el-button type="primary" @click="openJson">查看表单数据</el-button>

    <el-drawer v-model="drawerVisiable" title="数据视图" :direction="'rtl'" size="40%">
      <CodeView :code-json="JSON.stringify(dataForm, null, '\t')"></CodeView>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import type { Config } from '@/components/ConfigForm'
import { ChatDotRound, ChatLineRound, ChatRound } from '@element-plus/icons-vue'
import { markRaw, ref } from 'vue';
import CodeView from '@/components/CodeView/index.vue'
import ConfigForm from '@/components/ConfigForm/index'

const colors = ['#99A9BF', '#F7BA2A', '#FF9900']
const icons = [markRaw(ChatRound), markRaw(ChatLineRound), markRaw(ChatDotRound)]
/**ConfigForm绑定对象 */
const dataForm = ref<ObjectAny>({})

/**ConfigForm配置 */
const config = ref<Config>({
  mode: 'add',
  formProps: {},
  rowProps: {},
  columns: [
    { prop: 'demo1', label: '基础用法', type: 'rate' },
    { prop: 'demo2', label: '定义色彩', type: 'rate', props: { colors } },
    { prop: 'demo3', label: '允许半选', type: 'rate', props: { allowHalf: true } },
    {
      prop: 'demo4', label: '辅助文字', type: 'rate', props: {
        texts: ['oops', 'disappointed', 'normal', 'good', 'great'],
        showText: true
      }
    },
    { prop: 'demo5', label: '可清空', type: 'rate', props: { clearable: true } },
    {
      prop: 'demo6', label: '更多种类图标', type: 'rate',
      props: { icons, voidIcon: markRaw(ChatRound), colors: ['#409eff', '#67c23a', '#FF9900'] }
    },
    {
      prop: 'demo7', label: '只读', value: 3.7, type: 'rate',
      props: { disabled: true, showScore: true, textColor: '#ff9900', scoreTemplate: '{value} points' }
    },
  ]
})

// 数据视图
const drawerVisiable = ref(false)
const openJson = () => {
  drawerVisiable.value = true
}
</script>